<template>
  <div>
    <!-- 页面顶部 -->
    <div class="header">
      <div class="header-fixed">
        <div class="main">
          <div class="logo">
            <router-link to="/">
              <img src="../assets/img/header/logo.png" />
            </router-link>
          </div>
          <!-- 导航栏 -->
          <div class="nav">
            <span> <router-link to="/">首页</router-link> </span>
            <span>
              <router-link :key="$route.fullPath" to="productcake"
                >蛋糕</router-link
              >
            </span>
            <span>
              <router-link :key="$route.fullPath" to="productbread"
                >面包</router-link
              >
            </span>
            <span>
              <router-link :key="$route.fullPath" to="producttea"
                >下午茶</router-link
              >
            </span>
            <span>
              <router-link :key="$route.fullPath" to="productice"
                >冰激凌</router-link
              >
            </span>
            <span> <router-link to="/activity">全国送</router-link> </span>
            <span> <router-link to="/zone">企业专区</router-link> </span>
          </div>
          <!-- 功能块 -->
          <div class="function">
            <span
              id="wei"
              @mouseenter="onMouseIn2()"
              @mouseleave="onMouseOut2()"
            >
              <a href="">微信小程序</a>
              <div v-if="seen2">
                <div id="weixin" class="wx-hide">
                  <img src="../assets/img/header/header.jpg" alt="" />
                  <span>扫码查看小程序</span>
                </div>
              </div>
            </span>
            <span id="ap">
              <a href="" @mouseenter="onMouseIn3()" @mouseleave="onMouseOut3()"
                >App</a
              >

              <div id="app" class="app-hide" v-if="seen3">
                <img src="../assets/img/header/download.png" alt="" />
                <span>扫码下载App</span>
              </div>
            </span>
            <span id="add" @mouseenter="onMouseIn()" @mouseleave="onMouseOut()">
              <a href="#" v-text="nav"></a>
              <span class="san"></span>
              <div id="box" class="hide" v-if="seen">
                <span
                  v-for="(nav, index) in navs"
                  :key="index"
                  @click="onclick(nav)"
                  >{{ nav }}</span
                >
              </div>
            </span>
            <span class="msg">
              <a @mouseenter="onMouseIn4()" @mouseleave="onMouseOut4()">消息</a>
              <div class="msg-box" v-if="seen4">
                <span>
                  <a href="">通知</a>
                </span>
                <span> <a href="">物流</a> </span>
              </div>
            </span>
            <div>
              <span>
                <router-link :key="$route.fullPath" to="/login"
                  >登录</router-link
                >
              </span>
              <span>/</span>
              <span>
                <router-link :key="$route.fullPath" to="/register"
                  >注册</router-link
                >
              </span>
            </div>
            <span class="shopping">
              <img src="../assets/img/header/gouwuche (1).png" alt="" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //鼠标进入,移出
      seen: false,
      seen2: false,
      seen3: false,
      seen4: false,
      navs: [
        "上海",
        "北京",
        "天津",
        "杭州",
        "苏州",
        "无锡",
        "广州",
        "深圳",
        "佛山",
      ],
      nav: "上海",
    };
  },
  methods: {
    //点击后传参数,通过nav接受参数
    onclick(nav) {
      //console.log(nav);//nav就是点击后的参数
      this.nav = nav;
    },
    onMouseIn() {
      //console.log("进入");
      this.seen = true; //鼠标移入显示
    },
    onMouseOut() {
      //console.log("退出");
      this.seen = false; //鼠标移出隐藏
    },
    onMouseIn2() {
      //console.log("进入");
      this.seen2 = true; //鼠标移入显示
    },
    onMouseOut2() {
      //console.log("退出");
      this.seen2 = false; //鼠标移出隐藏
    },
    onMouseIn3() {
      //console.log("进入");
      this.seen3 = true; //鼠标移入显示
    },
    onMouseOut3() {
      //console.log("退出");
      this.seen3 = false; //鼠标移出隐藏
    },
    onMouseIn4() {
      //console.log("进入");
      this.seen4 = true; //鼠标移入显示
    },
    onMouseOut4() {
      //console.log("退出");
      this.seen4 = false; //鼠标移出隐藏
    },
  },
};
</script>

<style src="../assets/css/header.css"></style>
<style lang="scss" scoped></style>
